<template>
  <label @click.stop>
    <el-select :loading="loading" v-model="valueModel" @change="onchange"
               class="sea-table-input-cell"
               :clearable="props.clearable" :placeholder="props.placeholder"
               :popper-options="popper_options">
      <el-option v-for="item in opts" :key="item.value"
                 :label="item.label" :value="item.value"></el-option>
    </el-select>
    <span v-if="validation" v-show="validation.valid === false" class="sea-form-error">{{ validation.message }}</span>
  </label>
</template>

<script setup lang="ts">
import {ref} from 'vue';
import {UseDictionary, useDictionary} from "@/widget/use/use-dictionary";
import {useValueModel, useValidator, UseValueModel} from "@/widget/data-table/use-value-model";
import setting from "@/widget/provider/setting";
import {usePopperOptions} from "@/widget/use/use-popper-options";

/**
 * 下拉框
 *
 * 这个版本的 el-select 有 bug，无法通过全局控制 size，而且还会报错（由 popper-options 引起）
 */
interface Props extends /* @vue-ignore */ UseDictionary, /* @vue-ignore */UseValueModel {
    // 字段名
    property: string
    // 行级数据
    row: Record<string, any>
    // 默认值（单向输入，需要通过 change 事件侦听变化）
    value?: boolean | number | string
    // 文字提示
    placeholder?: string
    // 数据变化事件
    change?: ModifiedMethod
    // 是否可清除
    clearable?: boolean

    /** 数据字典配置 */
    options: DictionaryItem[] | string
    /** 异步查询参数 */
    where?: Record<string, any>
    /** 异步获取字典数据的函数 */
    provider?: DictionaryQuery
}

const props = withDefaults(defineProps<Props>(), {
    placeholder: '请选择',
    clearable: true
})

// 弹窗配置，没这玩意儿会报错
const popper_options = usePopperOptions();

const {opts, loading} = useDictionary(props);

const {valueModel, onchange} = useValueModel(props);

const {validation} = useValidator(props);

</script>